<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页布局实战-搭骨架</title>
  <style>
    .m-main{
      width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }
    .m-header{
      width: 100%;
      height: 130px;
      background: #ffee22;
    }
    .m-menu {
      width: 100%;
      height: 50px;
      background: #3778bc;
    }
    .m-slide{
      width: 100%;
      height: 300px;
      background: #ffee22;
    }
    .m-news-notice{
      width: 100%;
      height: 287px;
      margin-top: 15px;
      display: flex;
    }
    .m-news{
      width: 780px;
      background: #3778bc;
    }
    .m-notice{
      width: 400px;
      margin-left: 20px;
      background: #3778bc;
    }
    .m-banner{
      width: 100%;
      height: 95px;
      margin-top: 16px;
      background: #ffee22;
    }
    .m-job-zhaopin{
      width: 100%;
      height: 270px;
      margin-top: 15px;
      display: flex;
    }
    .m-job{
      flex:1;
      background: #3778bc;
    }
    .m-zhaopin{
      flex:1;
      margin-left: 20px;
      background: #3778bc;
    }
    .m-benke-dangjian{
      width: 100%;
      height: 270px;
      margin-top: 32px;
      display: flex;
    }
    .m-benke{
      flex:1;
      background: #3778bc;
    }
    .m-dangjian{
      flex:1;
      margin-left: 20px;
      background: #3778bc;
    }
    .m-link{
      width: 100%;
      height: 148px;
      margin-top: 15px;
      background: #ff3399;
    }
    .m-footer{
      width: 100%;
      height: 44px;
      background: #3778bc;
      text-align: center;
      line-height: 44px;
      color: #ffffff;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="m-main">
    <div class="m-header">
      我是头部
    </div>
    <div class="m-menu">我是导航菜单</div>
    <div class="m-slide">我是轮播图</div>
    <div class="m-news-notice">
      <div class="m-news">新闻动态</div>
      <div class="m-notice">通知公告</div>
    </div>
    <div class="m-banner">我是广告</div>
    <div class="m-job-zhaopin">
      <div class="m-job">就业工作</div>
      <div class="m-zhaopin">招聘信息</div>
    </div>
    <div class="m-benke-dangjian">
      <div class="m-benke">本科教学</div>
      <div class="m-dangjian">党建信息</div>
    </div>
    <div class="m-link">友情链接</div>
    <div class="m-footer">广西大学 计算机与电子信息学院 版权所有</div>
  </div>
</body>
</html>